<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: seagreen;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #imglistid img{
            height: 100px;
            width: 100px;
        }
        #imglistid{
            width: 1700px;
            height: 100px;
            /* 使其悬浮紧贴 */
            display: flex;
        }
        #contation{
            width: 100%;
            height: 600px;
            /* 使其悬浮紧贴 */
            display: flex;
            /* 左右居中 */
            justify-content: center;
            /* 上下居中 */
            align-items: center;
        }
        #numdiv{
            width: 600px;
            height: 101px;
            border: 1px red solid;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="contation">
      <div id="numdiv">
        <div id="imglistid" onmouseenter="mouseEnterAction()" onmouseleave="mouseLeaveAction()">
            <img src="./img/img/lunbo/1.jpeg" >
            <img src="./img/img/lunbo/2.jpeg" >
            <img src="./img/img/lunbo/3.jpeg" >
            <img src="./img/img/lunbo/4.jpeg" >
            <img src="./img/img/lunbo/5.jpeg" >
            <img src="./img/img/lunbo/6.jpeg" >
            <img src="./img/img/lunbo/7.jpeg" >
            <img src="./img/img/lunbo/8.jpeg" >
            <img src="./img/img/lunbo/9.jpeg" >
            <img src="./img/img/lunbo/10.jpeg">
            <img src="./img/img/lunbo/11.jpeg">
            <img src="./img/img/lunbo/1.jpeg" >
            <img src="./img/img/lunbo/2.jpeg" >
            <img src="./img/img/lunbo/3.jpeg" >
            <img src="./img/img/lunbo/4.jpeg" >
            <img src="./img/img/lunbo/5.jpeg" >
            <img src="./img/img/lunbo/6.jpeg" >
        </div>
    </div>
</div>
</body>
    <script>

        var isBegin = true;
		var marginleft = 0;		
		var myInterval = null;

        document.getElementById('imglistid').onmouseenter = function(){
			isBegin = false;
		}
		document.getElementById('imglistid').onmouseleave = function(){
			isBegin = true;
		}
        
        function imgAction(){
            if(!isBegin){
				return;
			}
            var imgListDivObj = document.getElementById('imglistid');
            marginleft--;
            //console.log(mardinleft);
            imgListDivObj.style.marginLeft=marginleft+'px';
            if(marginleft==-1100){
                marginleft=0;
            };
            if(marginleft%100 == 0){
				clearInterval(myInterval);
				setTimeout(function(){
					myInterval = setInterval(imgAction,10);
				},1000)
			}else{
				imgListDivObj.style.marginLeft=marginleft+'px';						
			}
        };
        //进入事件关闭定时器
        // function mouseEnterAction(){
        //     clearInterval(mardisnull);
        // };
        // //离开定时器开启
        // function mouseLeaveAction(){
        //     // for(var i = 1; i < 1000; i++) {
        //     //     clearInterval(i);
        //     // };
        //         mardisnull=setInterval(imgAction,10);
        // };
        onload=function(){
            myInterval=setInterval(imgAction,10);
        };
        //https://www.bbsmax.com/A/gGdXQjb7z4/
    </script>
</html>